flex 布局

[官方文档](flex 布局的基本概念 - CSS（层叠样式表） | MDN (mozilla.org))

简介

网页布局（layout）是 CSS 的一个重点应用。

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。

它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

基础概念

容器默认存在两根轴：

水平的主轴（main axis）
垂直的交叉轴（cross axis）

主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

容器(flex container)属性：

flex-direction

属性决定主轴的方向（即项目的排列方向）

.box {
    flex-direction: row;            /* 从左往右 */
    flex-direction: row-reverse;    /* 从右往左 */
    flex-direction: column;         /* 从上到下 */
    flex-direction: column-reverse; /* 从下到上 */
}

flex-wrap

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box {
    flex-wrap: nowrap ;             /* 从不换行 */
    flex-wrap: wrap ;               /* 换行，从上到下 */
    flex-wrap: wrap-reverse;        /* 换行，从下到上 */
}

flex-flow

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

.box {
    flex-flow: <flex-direction> <flex-wrap> ; /* 基础语法 */
    flex-flow: row nowrap ;                   /* 项目从左到右排列，且不换行 */
    flex-flow: column wrap-reverse;           /* 项目从下到上排列，且换行为第一行的前方 */
}

justify-content

定义项目在主轴上的对齐方式:

.box {
    justify-content: flex-start ;    /* 靠主轴头部方向对齐（左、上）*/
    justify-content: flex-end ;      /* 靠主轴尾部方向对齐（右、下）*/
    justify-content: center ;        /* 居中 */
    justify-content: space-between ; /* 两端对齐，项目之间的间隔都相等。*/
    justify-content: space-around;   /* 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/
}

align-items

align-items属性定义项目在交叉轴上如何对齐。

.box {
    align-items: flex-start ;    /* 交叉轴的起点对齐 s*/
    align-items: flex-end ;      /* 交叉轴的终点对齐*/
    align-items: center ;        /* 交叉轴的中点对齐 */
    align-items: baseline ;      /* 项目的第一行文字的基线对齐*/
    align-items: stretch ;       /* （默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度*/
}

align-content

属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

.box {
    align-content: flex-start ;    /* 与交叉轴的起点对齐 */
    align-content: flex-end ;      /* 与交叉轴的终点对齐 */
    align-content: center ;        /* 与交叉轴的中点对齐 */
    align-content: stretch ;       /* 与交叉轴两端对齐，轴线之间的间隔平均分布 */
    align-content: space-between ; /* 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 */
    align-content: space-around ;  /* 轴线占满整个交叉轴 */
}

项目(flex items)属性

order

定义项目的排列顺序。数值越小，排列越靠前，默认为0。

.item {
    order:<integer>;
}

flex-grow

定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {
    flex-grow:<number>;/* default 0 */
}

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink

定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

如果设置为0，项目始终使用自身的宽度。

.item {
    flex-shrink:<number>; /* default 0 */
}

flex-basis

定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

.item {
    flex-basis: <length> | auto;/* default auto */
}

flex

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

align-self

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.box {
    align-self: auto ;          /* 自动 */
    align-self: flex-start ;    /*  */
    align-self: flex-end ;      /*  */
    align-self: center ;        /*  */
    align-self: baseline ;      /*  */
    align-self: stretch;        /*  */
}

常用方案

设置间距

直接使用gap（IE11 不支持）

.flex-container{
    gap {间距}px
}

使用margin配合变量

.flex-container{
    --gutter: 边距
    margin: calc(0px - var(--gutter)) 0 0 calc(0px - var(--gutter))
}

.flex-box {
    margin: var(--gutter) 0 0 var(--gutter)
}

简介​

基础概念​

相关属性​

容器(flex container)属性：​

flex-direction​

flex-wrap​

flex-flow​

justify-content​

align-items​

align-content​

项目(flex items)属性​

order​

flex-grow​

flex-shrink​

flex-basis​

flex​

align-self​

常用方案​

设置间距​

简介